<template>
    <a-layout style="height: 100%;">
        <PluginComp Plugin="Portal.Header">
            <template #Logo>
                <h3 class="title">
                    <RouterLink to="/app">
                        <span class="iconfont icon-16gf-appsSmall"></span>
                    </RouterLink>
                    应用名称
                </h3>
            </template>
            <template #CenterMenu>
                <a-menu class="MenuStyle" v-model:selectedKeys="current" mode="horizontal" :items="items" />
            </template>
            <template #Setting>
                <span></span>
            </template>
        </PluginComp>
        <router-view></router-view>
    </a-layout>
</template>

<script setup>
// 基础引用
import { ref, h } from 'vue';
import { useRoute, RouterLink } from 'vue-router';

const route = useRoute();
const current = ref([]);

if (route.name == 'AppAdmin' || route.name == 'AppAdminForm') {
    current.value[0] = 'AppAdmin'
} else {
    current.value[0] = route.name
}


const items = ref([{
    key: 'AppAdmin',
    label: h(RouterLink, { to: `/app-${route.params.appId}/admin` }, { default: () => '页面管理' }),
    title: '页面管理',
}, {
    key: 'AppIntegration',
    label: h(RouterLink, { to: `/app-${route.params.appId}/admin/integration` }, { default: () => '集成&自动化' }),
    title: '集成&自动化',
}, {
    key: 'AppSetting',
    label: h(RouterLink, { to: `/app-${route.params.appId}/admin/setting` }, { default: () => '应用设置' }),
    title: '应用设置',
}]);

// 导出对象
defineExpose({})

</script>

<style lang="less" scoped>
.title {
    line-height: 46px;
    padding: 0 10px;
    white-space: nowrap;
    display: flex;

    span {
        font-size: 20px;
        line-height: 48px;
        margin-right: 10px
    }
}

.MenuStyle {
    height: 48px;
    line-height: 48px;
    justify-content: center;
    // pointer-events: ;
}

.LogoTitle {
    font-size: 20px;
    margin-left: 16px;
    font-weight: bold;
}
</style>